<template>
	<view class="container">
		<scroll-view
			class="scroll-Y" 
			:refresher-enabled="true" 
			refresher-default-style="none" 
			:scroll-y="true"
			:scroll-into-view="scrollId"
			:refresher-triggered="refreshing"
			refresher-background="rgba(255, 255, 255, 0)"
			@refresherrefresh="refresh"
			@scrolltolower="reachBottom"
			@scroll="scroll"
		>
			<!-- 导航栏 -->
			<uni-nav-bar class="ch-nav" height="88rpx" :backgroundColor="navBgColor" leftWidth="90rpx" rightWidth="90rpx" color="#fff" :fixed="true" :padding="false" :border="navBorder" @clickLeft="$goBack(1)">
				<template slot="left">
					<image class="left" :src="!isBlack ? require('@/public/images/public/dhl_fhb.png') : require('@/public/images/public/dhl_fhjt.png')" mode="aspectFit"></image>
				</template>
				<text class="title" :class="{'color-black': isBlack}">{{member.nickname || ''}}</text>
				<template slot="right"></template>
			</uni-nav-bar>
			<!-- 头部背景区域 -->
			<view class="head flex-c">
				<image class="bg-avatar inheritwh" :src="member.avatar" mode="aspectFill"></image>
				<image v-if="member.type" class="renown-icon" :src="require('@/public/images/member/type_'+member.type+'.png')" mode="aspectFit"></image>
			</view>
			<view class="body flex-c">
				<!-- 用户基础信息 -->
				<view class="userinfo flex-r ac" v-if="member.userId">
					<lazy-image class="user-avatar border-round" :src="member.avatar+'?imageView2/1/w/100/h/100/q/50'" type="user" fit="cover"></lazy-image>
					<view class="user-other">
						<view class="other-top flex-r ac">
							<text class="text-bold">{{member.nickname}}</text>
							<!-- <image v-if="userId == user.userId" class="grade-icon" :src="require('@/public/images/member/'+member.level+'.png')" mode="aspectFit"></image> -->
						</view>
						<view class="other-bottom flex-r ac">
							<text class="text-secondary color-grey">声望值</text>
							<text class="text-regular">{{member.userScore}}</text>
							<text class="text-secondary color-grey ml30">发帖量</text>
							<text class="text-regular">{{member.countSendNum}}</text>
						</view>
					</view>
				</view>
				<!-- 关注联赛 -->
				<view class="follow flex-c" v-if="userId == user.userId || (member.compList && member.compList[0])">
					<view class="follow-head flex-r ac jsb">
						<text class="text-primary text-bold">关注联赛</text>
						<view class="flex-r ac" @tap="$goByName('followseason')" v-if="userId == user.userId">
							<text class="text-secondary color-blue">添加联赛</text>
							<image class="right-icon" src="@/public/images/public/yjt_l.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="season flex-r" v-if="member.compList && member.compList[0]">
						<text class="season-item text-small color-blue" v-for="(item, index) in member.compList" :key="index">{{item.compName}}</text>
					</view>
				</view>
				<!-- 关注球吧 -->
				<!-- <view class="follow" v-if="followBar.data[0]">
					<view class="follow-head flex-r ac jsb">
						<text class="text-primary text-bold">关注球吧</text>
						<view class="flex-r ac" @tap="$goByName('barlist')" v-if="userId == user.userId">
							<text class="text-secondary color-blue">更多球吧</text>
							<image class="right-icon" src="@/public/images/public/yjt_l.png" mode="aspectFit"></image>
						</view>
					</view>
					<scroll-view class="ballbar" :scroll-x="true" @scrolltolower="reachRight">
						<view class="bar-list flex-r ac">
							<view class="bar flex-c ac" v-for="(bar, index) in followBar.data" :key="index" @tap="$CHS.goBarHome(bar.id, bar.blacklist)">
								<lazy-image class="avatar border-round" :src="bar.logo+'?imageView2/1/w/100/h/100/q/50'" type="bar" fit="cover"></lazy-image>
								<text class="text-info text-hidden">{{bar.title}}</text>
							</view>
						</view>
					</scroll-view>
				</view> -->
				<view id="tabCon">
					<!-- tab列表 -->
					<view class="tab flex-r ac" :class="{'fixed': fixed}" >
						<template v-for="(item,index) in tabList">
							<text class="tab-tile text-primary text-bold color-grey" :key="index" :class="{'active': tabCur == index}" @tap="tabChange(index)">{{item.title}}</text>
						</template>
					</view>
					<view class="tab-body" :class="{'fixed': fixed}" @touchstart="touchStart" @touchend="touchEnd">
						<keep-alive>
							<!-- 方案列表 -->
							<view class="expert-article flex-c" v-if="tabCur == 0">
								<EmptyContent v-if="!articleList[tabCur][0]" top="170rpx" bgColor="#FFF" text="暂无更新的方案" img="qsy_zwxl" @refresh="getArticleList"></EmptyContent>
								<ArticleList v-else :list="articleList[tabCur]" type="memberhome" :showHead="false" :showBar="true" :showResult="true" :marginTop="false"></ArticleList>
							</view>
						</keep-alive>
						<!-- 话题列表 -->
						<!-- <keep-alive>
							<view class="expert-share flex-c" v-if="tabCur == 1">
								<EmptyContent v-if="!articleList[tabCur][0]" top="170rpx" bgColor="#FFF" text="暂无更新的话题" img="qsy_zwxl" @refresh="getArticleList"></EmptyContent>
								<DiscussList v-else :list="articleList[tabCur]" :showFoot="true" :showBar="true"  :radius="true" type="memberhome"></DiscussList>
							</view>
						</keep-alive> -->
						<view class="list-end flex-r pb20" v-if="articleList[tabCur][0] && tabList[tabCur].isEnd">
							<text>已经到底啦～</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '', //用户ID
				scrollId: '', //scrollview滚动ID
				fixed: false, //tab是否固定
				isBlack: false, //导航栏文字颜色变黑
				navBorder: false, //导航栏底部边框
				refreshing: false, //刷新状态
				scrollTop: 0, //滚动距离
				navBgColor: 'rgba(255,255,255,0)', //导航栏背景色
				
				member: {}, //用户信息
				renownLevel: 0, //声望等级
				followBar: { //关注的球吧
					data: [],
					pageNo: 1,
					isEnd: false
				},
				
				tabList: [ //tab列表
					{title: '方案', pageNo: 1, isEnd: false},
					// {title: '话题', pageNo: 1, isEnd: false},
				],
				tabCur: 0, //当前tab
				articleList: [[]] //方案、话题列表数据
			};
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		components: {
			DiscussList: () => import("@/components/ch-article/ch-discusslist.vue") //话题列表
		},
		onLoad() {
			this.userId = this.$Route.query.userId
			if(this.userId){
				this.getMemberInfo() //查询用户信息
				this.getFollowBar() //查询关注的球吧
			}else{
				this.$CHS.errorRequest('index', '数据请求错误，请返回重试');
			}
		},
		onShow() {
			//切换当前tab
			this.changeCurrentTab()
		},
		methods: {
			//滚动监听
			scroll(e) {
				this.scrollTop = e.detail.scrollTop
				if(!this.timeout){
					this.timeout = setTimeout(()=>{
						this.timeout = null
						this.setNavBgColor()
						uni.createSelectorQuery().select('#tabCon').boundingClientRect(res => {
							if(res && res.top < 10){ //计算滚动距离，固定tab栏
								this.fixed = true
								this.navBorder = false
								this.navBgColor = 'rgba(255,255,255,1)'
								this.isBlack = true
							}else{
								this.fixed = false
							}
						}).exec()
					}, 50)
				}
			},
			//下拉刷新
			refresh() {
				this.refreshing = true
				//更新基本信息
				this.getMemberInfo()
				//查询关注的球吧
				this.refreshFollowBar()
				//获取列表数据
				this.tabList[this.tabCur].pageNo = 1
				this.tabList[this.tabCur].isEnd = false
				this.getArticleList()
				setTimeout(() => {
					this.refreshing = false
				}, 800)
			},
			//滑动触底加载
			reachBottom() {
				if(!this.tabList[this.tabCur].isEnd){
					this.getArticleList()
				}
			},
			//查询球吧成员信息
			getMemberInfo() {
				this.$http.get({
					url: '/api/appUser/userInfo',
					data: {
						userId: this.userId
					}
				}).then((data) => {
					console.log('member', data);
					if(data.success && data.result){
						this.member = data.result
						this.getRenownRule()
					}else{
						uni.showToast({
							title: data.message || '数据查询失败，请稍后重试',
							icon: 'none'
						})
					}
				}).catch((error) => {
					console.log(error);
				})
			},
			//获取关注的球吧列表
			getFollowBar() {
				this.$http.get({
					url: '/api/forum/followList',
					data: {
						pageNo: this.followBar.pageNo,
						pageSize: 10,
						userId: this.userId,
						userType: 'user'
					}
				}).then((data) => {
					console.log('followBar', data);
					if(data.success && data.result && data.result.total){
						if(data.result.current == 1){
							this.followBar.data = data.result.records
						}else{
							this.followBar.data.push(...data.result.records)
						}
						this.followBar.isEnd = data.result.current >= data.result.pages
						this.followBar.pageNo = data.result.current + 1
					}else{
						this.followBar.data = []
					}
				}).catch((error) => {
					console.log(error);
				})
			},
			//获取文章列表
			getArticleList() {
				//发送请求
				this.$http.get({
					url: this.tabCur == 0 ? '/api/user/article/send/record' : '/api/dynamic/me/send',
					data: {
						type: 1,
						pageNo: this.tabList[this.tabCur].pageNo,
						pageSize: 15,
						userId: this.userId,
						userType: 'user'
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result && data.result.total){
						if(data.result.current == 1){
							this.$set(this.articleList, this.tabCur, data.result.records)
						}else{
							this.articleList[this.tabCur].push(...data.result.records)
						}
						this.tabList[this.tabCur].isEnd = data.result.current >= data.result.pages
						this.tabList[this.tabCur].pageNo = data.result.current + 1
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//声望等级规则
			getRenownRule() {
				let renownRule = sessionStorage.getItem('renownrule')
				if(renownRule){
					this.getRenownLevel(JSON.parse(renownRule))
					return
				}
				this.$http.get({
					url: '/api/appUser/level/rule',
				}).then((data) => {
					console.log('rule', data);
					if(data.success && data.result){
						this.getRenownLevel(data.result)
						sessionStorage.setItem('renownrule',JSON.stringify(data.result))
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//当前声望等级
			getRenownLevel(renownRule) {
				let length = renownRule.length
				for(let i = length - 1; i >= 0; i--){
					if(this.member.userScore >= renownRule[i].min){
						this.renownLevel = i
						break
					}
				}
			},
			//刷新关注的球吧
			refreshFollowBar() {
				this.followBar.pageNo = 1
				this.followBar.isEnd = false
				this.getFollowBar()
			},
			//右滑加载更多
			reachRight() {
				if(!this.followBar.isEnd){
					this.getFollowBar()
				}
			},
			//根据来源切换选项卡
			changeCurrentTab() {
				let index = this.$Route.query.tabCur
				if(typeof index != "undefined" && index != this.tabCur){
					this.tabChange(index, false);
				}else{
					this.tabChange(this.tabCur, false);
				}
			},
			//选项卡切换
			tabChange(index, scroll = true) {
				this.tabCur = index;
				if(!this.articleList[index][0]){
					this.getArticleList()
				}
				if(scroll){
					setTimeout(()=>{
						this.scrollId = 'tabCon'
						this.$nextTick(()=>{
							this.scrollId = ''
						})
					}, 50)
				}
			},
			//触摸滑动开始
			touchStart(e) {
				if (e.changedTouches.length == 1) {
					this.startX = e.changedTouches[0].clientX
					this.startY = e.changedTouches[0].clientY
				}
			},
			//触摸滑动结束
			touchEnd(e) {
				if (e.changedTouches.length == 1) {
					var endX = e.changedTouches[0].clientX;
					var endY = e.changedTouches[0].clientY;
					var xTowards = endX - this.startX;
					var yTowards = endY - this.startY;
					if (xTowards > 50 && Math.abs(yTowards) < 50) {//向右
						console.log('向右')
						if(this.tabCur > 0){
							this.tabChange(this.tabCur - 1)
						}
					}
					if (xTowards < -50 && Math.abs(yTowards) < 50) {//向左
						console.log('向左')
						let maxlen = this.tabList.length - 1;
						if(this.tabCur < maxlen){
							this.tabChange(this.tabCur + 1)
						}
					}
				}
			},
			//设置导航区域背景色
			setNavBgColor() {
				let scrollTop = this.scrollTop
				if(scrollTop > 10 && !this.fixed){
					this.navBorder = true
				}else{
					this.navBorder = false
				}
				switch (true){
					case scrollTop < 10:
						this.navBgColor = 'rgba(255,255,255,0)'
						this.isBlack = false
						this.navBorder = false
						break;
					case scrollTop < 20:
						this.navBgColor = 'rgba(255,255,255,0.1)'
						this.isBlack = false
						break;
					case scrollTop < 40:
						this.navBgColor = 'rgba(255,255,255,0.2)'
						this.isBlack = false
						break;
					case scrollTop < 80:
						this.navBgColor = 'rgba(255,255,255,0.4)'
						this.isBlack = true
						break;
					case scrollTop < 120:
						this.navBgColor = 'rgba(255,255,255,0.6)'
						this.isBlack = true
						break;
					case scrollTop < 150:
						this.navBgColor = 'rgba(255,255,255,0.7)'
						this.isBlack = true
						break;
					case scrollTop < 200:
						this.navBgColor = 'rgba(255,255,255,0.8)'
						this.isBlack = true
						break;
					case scrollTop > 300:
						this.navBgColor = 'rgba(255,255,255,1)'
						this.isBlack = true
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.scroll-Y{
			height: var(--safe-height);
		}
		.head{
			margin-top: -88rpx;
			width: 100%;
			height: 360rpx;
			overflow: hidden;
			position: relative;
			.bg-avatar{
				position: relative;
				&::after{
					content: "";
					position: absolute;
					width: 100%;
					height: 360rpx;
					top: 0;
					left: 0;
					background: rgba(0, 0, 0, 0.5);
					backdrop-filter: blur(10rpx);
				}
			}
			.renown-icon{
				align-self: flex-end;
				width: 160rpx;
				height: 160rpx;
				position: absolute;
				bottom: 112rpx;
				right: 20rpx;
			}
		}
		.body{
			position: relative;
			margin-top: -112rpx;
			width: 100%;
			background: #F2F5FA;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			.userinfo{
				margin-top: 40rpx;
				.user-avatar{
					margin-right: 30rpx;
					width: 120rpx;
					height: 120rpx;
				}
				.user-other{
					.other-top{
						.text-bold{
							font-size: 36rpx;
						}
						.grade-icon{
							margin-left: 20rpx;
							width: 93rpx;
							height: 32rpx;
						}
					}
					.other-bottom{
						margin-top: 25rpx;
						line-height: 24rpx;
						.ml30{
							margin-left: 30rpx;
						}
						.text-regular{
							margin-left: 14rpx;
							font-family: Roboto;
						}
					}
				}
			}
			.follow{
				margin-top: 30rpx;
				.follow-head{
					.right-icon{
						margin-left: 10rpx;
						width: 24rpx;
						height: 24rpx;
					}
				}
				.season, .ballbar{
					margin-top: 20rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
				}
				.season{
					flex-wrap: wrap;
					width: 100%;
					box-sizing: border-box;
					padding: 30rpx 20rpx 10rpx 0;
					.season-item{
						height: 48rpx;
						line-height: 48rpx;
						background: #E5EFFF;
						border-radius: 4rpx;
						padding: 0 40rpx;
						margin: 0 0 20rpx 20rpx;
					}
				}
				.ballbar{
					white-space: nowrap;
					padding: 40rpx 0;
					.bar-list{
						width: fit-content;
						.bar{
							width: 160rpx;
							.avatar{
								width: 96rpx;
								height: 96rpx;
							}
							.text-hidden{
								margin-top: 15rpx;
								max-width: 150rpx;
							}
						}
					}
				}
			}
			.tab{
				padding: 30rpx 0 0;
				&.fixed{
					padding: 0 20rpx;
					background: #FFFFFF;
					position: fixed;
					top: 88rpx;
					z-index: 10;
					right: 0;
					left: 0;
					box-shadow: 0 1rpx 0 0 #EDEDED;
					max-width: $max-width;
					margin: $pc-margin;
					box-sizing: border-box;
					.tab-tile{
						height: 88rpx;
						display: flex;
						align-items: center;
						/* .text-primary{
							color: #999999;
						}
						&.active{
							.text-primary{
								font-weight: bold;
								color: #0055FF;
							}
							background-image: url("~@/public/images/public/zjdl_hk.png");
							background-repeat: no-repeat;
							background-position: bottom center;
							background-size: 96rpx 8rpx;
						} */
					}
				}
				.tab-tile{
					margin-right: 40rpx;
					&.active{
						color: #333;
					}
				}
			}
			.tab-body{
				padding: 20rpx 0 0;
				&.fixed{
					padding-top: 198rpx;
				}
				/deep/ .empty-content{
					min-height: 853rpx;
					box-sizing: border-box;
				}
			}
		}
	}
</style>
